<template>
  <div class="search">
    <!-- <el-input
      v-model="input2"
      class="w-50 m-2"
      placeholder="Max 200 Orders ID,for example:"
      :prefix-icon="Search"
    /> -->
    <el-input
      class="textarea"
      ref="textareaRef"
      :rows="rowNum"
      v-model="textarea"
      resize="none"
      type="textarea"
      :prefix-icon="Search"
      @focus="focus"
      @blur="blur"
      placeholder="Max 200 Order ID，for example:
1001003
1002004
1002005"
    />

    <el-button @click="smbValue" class="m-l10" type="danger">Search</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
const textarea = ref("");
const rowNum = ref(1);
const textareaRef = ref();

const focus = () => {
  console.log(123, textareaRef.value.textarea);
  rowNum.value = 10;
  textareaRef.value.textarea.style.overflow = "auto";
};
const blur = () => {
  rowNum.value = 1;
  textareaRef.value.textarea.style.overflow = "hidden";
};

// 格式化文本
const replaceStr = (str: string) => {
  let string = str;
  //去掉所有的换行符
  string = string.replace(/\n/g, ",");
  string = string.replace(/\s/g, ""); //去掉所有的空格
  console.log(string);

  return string;
};

const smbValue = () => {
  replaceStr(textarea.value);
  ElMessage("提交格式：" + `'${replaceStr(textarea.value)}'`);
};
onMounted(() => {
  textareaRef.value.textarea.style.overflow = "hidden";
});
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  width: 30%;
  position: relative;
  .textarea {
    position: absolute;
    height: 31px;
    z-index: 9;
  }
  ::v-deep .el-textarea__inner {
    padding: 7px 0px 4px 10px;
  }
  .m-l10 {
    margin-left: 103%;
  }
}
</style>
